<template>
	<div class="logo-form" v-loading="loading" element-loading-text="登录中..." element-loading-spinner="el-icon-loading" element-loading-background="rgba(255, 255, 255, 0.8)">
		<div class="logon-ins">
			<img :src="logo" alt="" />
			<!-- <p>{{ webName }}</p> -->
		</div>
		<div class="form-item account">
			<input class="ipt" type="text" v-model="form.account" placeholder="请输入账号" @change="verifyAccount = form.account ? false : true" />
			<span class="icon el-icon-user"></span>
			<p class="tips" v-show="verifyAccount">
				<span class="el-icon-warning-outline"></span>
				请输入账号
			</p>
		</div>
		<div class="form-item password">
			<input class="ipt" type="password" v-model="password" placeholder="请输入密码" @change="verifyPassword = password ? false : true" />
			<span class="icon el-icon-lock"></span>
			<p class="tips" v-show="verifyPassword">
				<span class="el-icon-warning-outline"></span>
				请输入密码
			</p>
		</div>
		<div class="form-item code" v-if="valiCode.flag">
			<input type="text" class="ipt" v-model="valiCode.codeInput" placeholder="请输入验证码" maxlength="4" />
			<span class="iconfont icon-yanzhengyanzhengma"></span>
			<img :src="valiCode.codeImg" @click="getCode()" alt />
		</div>
		<div class="other-btn">
			<!-- <span>忘记密码</span>
      <el-divider direction="vertical"></el-divider>
      <span @click="routeToByName('register')">
        <i class="el-icon-edit"></i>注册
      </span>-->
		</div>
		<div class="form-item submit" style="border-bottom: none">
			<button class="btn-submit" v-preventReClick @click="submit()">登 录</button>
			<!-- <el-button @click="routeToByName('register')" type="text" class="register-txt">注册账号</el-button> -->
		</div>
	</div>
</template>
<script>
import md5 from 'js-md5';
import { imageCode, login, tbSysUserAddUserInfo } from '@/api/http';
import { setSession, removeSession } from '@/utils/session';
import { tbDeptQueryParentList } from '@/api/admin/system/unitManage.js';
let routeFrom = '';
let routeQuery = {};
import webinfo from '@/mixins/webinfo.js';
export default {
	mixins: [webinfo],
	data() {
		return {
			loading: false,
			verifyAccount: false,
			verifyPassword: false,
			form: {
				account: '',
				password: ''
			},
			password: '',
			valiCode: {
				flag: false,
				codeInput: '',
				code: '',
				codeImg: ''
			},
			redirect: ''
		};
	},
	mounted() {
		this.init();
		window.addEventListener('keydown', this.keyDown);
	},
	destroyed() {
		window.removeEventListener('keydown', this.keyDown, false);
	},
	beforeRouteEnter(to, from, next) {
		routeFrom = from.name;
		routeQuery = from.query;
		if (from.path.includes('/admin')) {
			routeFrom = '';
		}
		next();
	},
	methods: {
		async init() {
			let res = await this.$store.dispatch('getDictionaryVal', 'VAILCODE');
			this.valiCode.flag = res[0] == 1;
			this.valiCode.flag ? this.getCode() : '';
		},
		getCode() {
			this.valiCode.codeInput = '';
			imageCode().then((res) => {
				let { code, base64String } = res.data.data[0];
				this.valiCode.code = code;
				this.valiCode.codeImg = base64String;
			});
		},
		submit() {
			if (this.valiCode.flag && this.valiCode.codeInput.toUpperCase() != this.valiCode.code.toUpperCase()) {
				this.$message.error('验证码错误或者为空');
				this.codeInput = '';
				this.getCode();
				return;
			}
			this.verifyAccount = this.form.account ? false : true;
			this.verifyPassword = this.password ? false : true;
			if (!this.verifyAccount && !this.verifyPassword) {
				this.handleLogin();
			}
		},
		handleLogin() {
			this.form.password = md5(this.password + this.md5Key).toUpperCase();
			login(this.form).then(async (res) => {
				if (res.data.code == 0) {
					this.loading = true;
					let data = res.data.data[0];
					setSession('authorization', res.headers.authorization);
					if (!(await this.loginEnd(data))) return false;
					this.$store.dispatch('getTbMenuQueryData').then((res) => {
						if (!!res && res.length > 0) {
							this.getDeptParentList(data);
							this.$store.commit('SETUSERINFO', data);
							setTimeout(() => {
								let redirect = this.$route.query.redirect;
								let toPath = redirect || routeFrom || 'home';
								if (toPath == 'register') {
									toPath = 'index';
								}
								if ((this.entryName = '武汉体育学院')) {
									toPath = 'admin';
								}
								this.$router.push({ name: toPath, query: routeQuery });
								this.loading = false;
							}, 800);
						} else {
							removeSession('authorization');
							this.$alert('您无后台管理权限，无法登陆后台。', '登陆提醒', {
								confirmButtonText: '确定',
								callback: (action) => {
									window.location.reload();
								}
							});
						}
					});
				} else {
					this.$message.error(res.data.msg);
					this.loading = false;
				}
			});
		},
		//获取部门详情
		getDeptParentList(data) {
			if (!data.deptId) return;
			tbDeptQueryParentList(data.deptId).then((res) => {
				let deptFullData = res.data.data[0];
				this.$set(data, 'deptFullData', deptFullData);
				this.$store.commit('SETUSERINFO', data);
			});
		},
		keyDown(e) {
			if (e.keyCode == 13) {
				this.submit();
			}
		},
		async loginEnd(data) {
			let result = await tbSysUserAddUserInfo(data.id).then((res) => res.data);
			if (result.code === '0') {
				let datas = !result.data ? {} : result.data[0];
				let { loginTime, createTime, ipAddr, menuRoleList } = datas;
				if (menuRoleList.length === 0) {
					removeSession('authorization');
					this.$alert('您无后台管理权限，无法登陆后台。', '登陆提醒', {
						confirmButtonText: '确定',
						callback: (action) => {
							window.location.reload();
						}
					});
					return false;
				} else {
					this.$set(data, 'loginTime', loginTime);
					this.$set(data, 'createTime', createTime);
					this.$set(data, 'ipAddr', ipAddr);
					this.$store.commit('SETUSERINFO', data);
					return true;
				}
			}
		}
	}
};
</script>
<style lang="scss">
.logo-form {
	.form-item {
		position: relative;
		border-bottom: 1px solid #d6d6d6;
		span.icon {
			position: absolute;
			top: 16px;
			left: 0px;
			font-size: 24px;
			color: #d6d6d6;
		}
		.tips {
			position: absolute;
			bottom: -5px;
			left: 75px;
			color: #fff;
			font-size: 14px;
		}
	}
	.ipt {
		width: 99%;

		border-radius: 54px;
		border: none;
		outline: none;
		margin: 20px 0;
		text-indent: 35px;
		font-size: 14px;
		color: #333;
	}
	.btn-submit {
		width: 100%;
		height: 48px;
		line-height: 48px;
		background: $mainColor;
		color: #fff;
		font-size: 16px;

		outline: none;
		border: 0 none;
		cursor: pointer;
		&:hover {
			background: $secondColor;
		}
	}
	.code {
		position: relative;
		.ipt {
			width: 100%;
			margin-right: 5%;
			height: 40px;
			line-height: 40px;
		}
		img {
			position: absolute;
			right: 0;
			top: 21px;
			border-top-right-radius: 30px;
			border-bottom-right-radius: 30px;
		}
		.iconfont {
			position: absolute;
			left: 0;
			top: 30px;
			font-size: 24px;
			font-weight: bold;
			color: #d6d6d6;
		}
	}
	.other-btn {
		text-align: right;
		color: #000;
		margin-bottom: 30px;
		padding: 0 20px;
		span {
			cursor: pointer;
			color: $mainColor;
			font-weight: 500;
			&:hover {
				border-bottom: 1px solid #fff;
			}
		}
	}
	.logon-ins {
		margin-bottom: 30px;
		img {
			display: block;
			margin: 0 auto;
			max-width: 100%;
		}
		p {
			text-align: center;
			margin-top: 24px;
			font-size: 24px;
			font-family: 'MicrosoftYaHei-Bold, MicrosoftYaHei';
			font-weight: bold;
			margin-bottom: 40px;
		}
	}

	input:-webkit-autofill {
		transition: background-color 5000s ease-in-out 0s;
	}

	button.el-button.register-txt.el-button--text {
		text-align: center;
		width: 100%;
		border-bottom: none;
		margin-top: 20px;
	}
}
</style>
